<template>
  <div class="dashboard-editor-container main-conent-minheight">
    <div>
      <el-card class="box-card" shadow="never">
        <div class="main">
          <el-form :model="logSourceForm" label-position="left" ref="logSourceForm">
            <el-row :gutter="24">
              <!-- <span class="title" style="margin-bottom:20px;">常用工具</span> -->
              <div style="margin:0 auto;width:45vw;">
                <div style="display:flex;justify-content:center;flex-direction: column;align-items:center;">
                  <svg-icon icon-class="tool_empty" style="font-size:100px;" />
                  <p>常用工具</p>
                </div>
                <p style="font-size:14px;">基本信息：</p>
                <el-select size="small" v-model="logSourceForm.Method"
                  style="width: 100px;margin-right:10px;margin-bottom:10px;">
                  <el-option label="ping" value="PING"></el-option>
                  <el-option label="telnet" value="TELNET"></el-option>
                </el-select>
                <el-input size="small" v-model="logSourceForm.Addr"
                  oninput="value=value.replace(/[^0-9a-zA-Z.-?@:/#]/g, '')" placeholder="请输入合法IP或域名，支持IPV4、IPV6"
                  style="width: 400px;margin-right:10px;margin-bottom:10px;"></el-input>
                <el-input size="small" v-model.number="logSourceForm.Port" oninput="value=value.replace(/[^0-9]/g, '')"
                  placeholder="端口号" @input="validatePort" v-if="logSourceForm.Method === 'TELNET'" maxlength="5"
                  style="width: 100px;margin-right:10px;margin-bottom:10px;"></el-input>
                <el-button type="primary" size="small" @click="saveSettings()" :loading="loading">{{ loading ? '查询中' :
                  '立即查询' }}</el-button>
                <p style="font-size:14px;margin-top:20px;">查询结果：</p>
                <el-input size="small" v-model="Result" type="textarea" :rows="10" style="width: 100%"></el-input>
              </div>
            </el-row>
          </el-form>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { connrequest } from '@/api/firstPage';
import { ipv6Regex, ipv4Regex } from '@/utils/RegularExpression.js';
import { validatePort } from "@/utils/index.js";

export default {
  data() {
    return {
      logSourceForm: {
        Method: 'PING',
        Addr: '',
        Port: ''
      },
      Result: '',
      loading: false
    }
  },
  created() {
  },
  methods: {
    validatePort(value) {
      this.$set(this.logSourceForm, 'Port', validatePort(value))
    },
    async saveSettings() {
      this.loading = true
      this.Result = '查询中'
      // if(!this.logSourceForm.Addr || (!ipv6Regex.test(this.logSourceForm.Addr) && !ipv4Regex.test(this.logSourceForm.Addr))){
      //   this.$message.error('请输入合法IP或域名，支持IPV4、IPV6')
      //   this.loading = false
      //   this.Result = ''
      //   return false
      // }
      if (this.logSourceForm.Method === 'TELNET' && !this.logSourceForm.Port) {
        this.$message.error('端口号不能为空')
        this.loading = false
        this.Result = ''
        return false
      }
      if (this.logSourceForm.Method === 'TELNET' && (this.logSourceForm.Port < 1 || this.logSourceForm.Port > 65535)) {
        this.$message.error('请输入正确端口号')
        this.loading = false
        this.Result = ''
        return false
      }
      const data = {
        Data: {
          ...this.logSourceForm,
          Port: this.logSourceForm.Port ? this.logSourceForm.Port * 1 : undefined
        }
      }
      const res = await connrequest('SupportTools', data)
      if (res.Status.StatusCode === 0) {
        this.loading = false
        this.Result = res.Data.Result
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  padding-left: 10px;

  .subtitle {
    display: block;
    font-size: 14px;
    padding-top: 30px;
  }

  .el-icon-warning {
    cursor: pointer;
  }

  .save {
    display: flex;
    justify-content: center;

  }
}</style>